<template>
  <div class="loading">
    <div class="load-box">
      <looping-rhombuses-spinner
        :animation-duration="800"
        :rhombus-size="15"
        color="#000"
      />
      <p class="text"></p>
    </div>
  </div>
</template>

<script>
import { LoopingRhombusesSpinner } from 'epic-spinners'
export default {
  components: {
    LoopingRhombusesSpinner
  }
}
</script>

<style lang="scss" scoped>
.loading{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #FEDF0C;
  // background-color: rgba(254, 223, 12, 0.5);
  z-index: 9999;
  .load-box{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
    text-align: center;
    .looping-rhombuses-spinner{
      margin: auto;
    }
    .text{
      line-height: 2;
    }
  }
}
</style>
